<template>
  <div class="table-transfer">
    <el-row :gutter="20">
      <el-col :span="10">
        <div class="tableTitle">
          <span>{{ $t("mesWorkCalendars.waitingList") }}</span>
          <span>{{ staffCheckNum }}/{{ staffNum }}</span>
        </div>
        <!-- :key="tableKey" -->
        <el-table
          ref="staffTable"
          :data="staffList"
          max-height="315"
          :row-key="getRowKey"
          border
          fit
          highlight-current-row
          @selection-change="handleStaffChange"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            :label="$t('mesWorkCalendars.shiftAbbreviation')"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.shiftName }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('mesWorkCalendars.startTime')"
            align="center"
            width="90"
          >
            <template slot-scope="{ row }">
              <span>{{ row.shiftBeginTime }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('mesWorkCalendars.endTime')"
            align="center"
            width="90"
          >
            <template slot-scope="{ row }">
              <span>{{ row.shiftEndTime }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="3" align="center" class="buttonAll">
        <el-button
          @click="addStaff('single')"
          type="primary"
          :disabled="!staffData.length"
          class="staffButton"
        >
          {{ $t("mesWorkCalendars.moveIn") }}
          <i class="el-icon-arrow-right"></i>
        </el-button>
        <el-button
          @click="removeStaff('single')"
          type="primary"
          :disabled="!selectedStaffData.length"
          class="staffButton"
        >
          {{ $t("mesWorkCalendars.moveOut") }}
          <i class="el-icon-arrow-left"></i>
        </el-button>
        <el-button
          @click="addStaff('all')"
          type="primary"
          :disabled="!staffList.length"
          class="staffButton"
        >
          {{ $t("mesWorkCalendars.allMoveIn") }}
        </el-button>
        <el-button
          @click="removeStaff('all')"
          type="primary"
          :disabled="!selectedStaffList.length"
          class="staffButton"
        >
          {{ $t("mesWorkCalendars.allMoveOut") }}
        </el-button>
      </el-col>
      <el-col :span="11">
        <div class="tableTitle">
          <span>{{ $t("mesWorkCalendars.SelectedList") }}</span>
          <span>{{ selectedStaffCheckNum }}/{{ selectedStaffNum }}</span>
        </div>
        <el-table
          ref="selectedStaffTable"
          :data="selectedStaffList"
          max-height="315"
          :row-key="getRowKey"
          border
          fit
          highlight-current-row
          @selection-change="handleSelectedStaffChange"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            :label="$t('mesWorkCalendars.shiftAbbreviation')"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.shiftName }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('mesWorkCalendars.startTime')"
            align="center"
            width="90"
          >
            <template slot-scope="{ row }">
              <span>{{ row.startTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('mesWorkCalendars.endTime')"
            align="center"
            width="90"
          >
            <template slot-scope="{ row }">
              <span>{{ row.endTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('mesWorkCalendars.teamAbbreviation')"
            align="center"
          >
            <template slot-scope="{ row }">
              <el-select
                v-model="row.teamId"
                :placeholder="$t('common.select')"
              >
                <el-option
                  v-for="item in options"
                  :key="item.teamId"
                  :label="item.teamName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  lineCodeLA,
  mesShiftList,
  mesWorkCalendarsList,
} from "@/api/configuration/mesWorkCalendars";
export default {
  props: {
    linCode: {
      type: String,
      default: "hello world",
    },
  },
  data() {
    return {
      // 待选
      staffList: [],
      options: [], //下拉班族数据
      // listLoading: true,
      // 待选选中
      staffData: [],
      // 总数
      staffNum: 0,
      // 选中数量
      staffCheckNum: 0,
      // 已选选中
      selectedStaffData: [],
      // 已选总数
      selectedStaffNum: 0,
      // 已选选中数量
      selectedStaffCheckNum: 0,
      // 已选列表
      selectedStaffList: [],
    };
  },
  methods: {
    //差集
    getDifferentArr(allArr, partArr, key) {
      for (let i = allArr.length - 1; i >= 0; i--) {
        for (let j = 0; j < partArr.length; j++) {
          if (allArr[i][key] === partArr[j][key]) {
            allArr.splice(i, 1);
            break;
          }
        }
      }
      return allArr;
    },
    //工作日历-查询当日详情信息
    mesWorkCalendarsList(data) {
      this.mesShiftList(async () => {
        let res = await mesWorkCalendarsList(data);
        this.selectedStaffList = res.data.result;
        this.$emit("getInfoList", JSON.parse(JSON.stringify(res.data.result)));
        if (res.data.result.length > 0) {
          this.$emit("getDateType", res.data.result[0].dateType);

          let staffList = this.getDifferentArr(
            this.staffList,
            res.data.result,
            "shiftName"
          );
          //console.log(222222222, staffList);
          this.$set(this, "staffList", staffList);
        } else {
          this.$emit("getDateType", "");
        }
      });
    },
    // getTeamList(data) {
    //   // console.log(data);
    //   // lineCodeLA(data) {
    //   //   let res = await lineCodeLA(data);
    //   //   this.options = res.data.result;
    //   // }
    //   // //获取班组简称
    //   // this.lineCodeLA(data) {
    //   //   let res = await lineCodeLA(data);
    //   //   this.options = res.data.result;
    //   // },
    // },
    //获取班组简称
    async getTeamList(data) {
      let res = await lineCodeLA(data);
      this.options = res.data.result;
    },
    //左侧table数据
    async mesShiftList(callback) {
      let res = await mesShiftList();
      //console.log(111111111);
      this.staffList = res.data.result.map((ite) => {
        return {
          ...ite,
          startTime: ite.shiftBeginTime,
          endTime: ite.shiftEndTime,
          teamId: "",
        };
      });
      callback();
    },
    getRowKey(row) {
      return row.id;
    },
    // 左边表格选中存入staffData
    handleStaffChange(rows) {
      this.staffCheckNum = rows.length;
      this.staffData = [];
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.staffData.push(row);
          }
        });
      }
    },
    // 左->右(单选-全选)
    addStaff(type) {
      setTimeout(() => {
        // 清空选择
        this.$refs["staffTable"].clearSelection();
        this.$refs["selectedStaffTable"].clearSelection();
      }, 0);
      if (type === "single") {
        this.staffData.forEach((item) => {
          this.selectedStaffList.push(item);
        });
        this.selectedStaffNum = this.selectedStaffList.length;
        for (let i = 0; i < this.staffList.length; i++) {
          for (let j = 0; j < this.staffData.length; j++) {
            if (this.staffList[i].id === this.staffData[j].id) {
              this.staffList.splice(i, 1);
              this.staffNum = this.staffList.length;
            }
          }
        }
      }
      if (type === "all") {
        this.staffList.forEach((item) => {
          this.selectedStaffList.push(item);
        });
        this.staffList = [];
        this.staffNum = this.staffList.length;
        this.selectedStaffNum = this.selectedStaffList.length;
      }
    },
    // 右边表格选中存入selectedStaffData
    handleSelectedStaffChange(rows) {
      this.selectedStaffCheckNum = rows.length;
      this.selectedStaffData = [];
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.selectedStaffData.push(row);
          }
        });
      }
    },
    // 右->左(单选-全选)
    removeStaff(type) {
      setTimeout(() => {
        this.$refs["staffTable"].clearSelection();
        this.$refs["selectedStaffTable"].clearSelection();
      }, 0);
      if (type === "single") {
        this.selectedStaffData.forEach((item) => {
          this.staffList.push(item);
          this.staffNum = this.staffList.length;
        });
        //console.log("this.staffList", this.staffList);
        for (let i = 0; i < this.selectedStaffList.length; i++) {
          for (let j = 0; j < this.selectedStaffData.length; j++) {
            if (
              this.selectedStaffList[i] &&
              this.selectedStaffData[j] &&
              this.selectedStaffList[i].id === this.selectedStaffData[j].id
            ) {
              this.selectedStaffList.splice(i, 1);
              this.selectedStaffNum = this.selectedStaffList.length;
            }
          }
        }
      }
      if (type === "all") {
        this.selectedStaffList.forEach((item) => {
          this.staffList.push(item);
          this.staffNum = this.staffList.length;
        });
        this.selectedStaffList = [];
        this.selectedStaffNum = 0;
      }
    },
  },
  created() {
    // this.mesShiftList();
    //  this.lineCodeLA(this.$props.linCode);
  },
};
</script>
<style lang="scss" scoped>
.table-transfer {
  .staffButton {
    width: 100px;
    margin-left: 0px;
    margin-bottom: 10px;
  }
  .buttonAll {
    margin-top: 21px;
    display: inline-block;
    vertical-align: middle;
  }
}
</style>
